<template>
  <div class="content-box">
    <p class="banner">
      <img src="/static/images/banner.png" alt="" />
    </p>
    <div class="content">
      <div class="lanmu-box" id="userinfodesc" >
        <div :class="{'on':isShow}" :style="{paddingTop:isShow?statusBarHeight+'px':'0px'}">
          <div class="lanmu" v-for="(item,index) in lanmuList" :key="index" >
            <div class="box" @click="lanmuClick(index)">
              <div class="item">
                <p class="label" v-if="index !== 2">空闲<span>{{ item.num }}</span></p>
                <p class="label" v-else>存、取</p>
                <p class="name">{{ item.name }}</p>
                <img v-if="item.state" src="/static/images/list-lanmu-line.png" alt="" />
              </div>
            </div>
            <p class="mid"></p>
          </div>
        </div>
      </div>
      
      <div class="taizhu-box" v-if="lanmuIndex === 0">
        <div class="title_box">
          <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230710/aZmapmXEZW3L8hClBJ9K.png" alt="">
        </div>
        <div class="list-box">
          <div class="list" :class="{'on':item.status != 'free'}" v-for="(item, index) in list">
            <img v-if="item.status == 'free'" src="/static/images/zhuotai-icon.png" alt="" />
            <img v-else src="/static/images/zhuotai-icon-on.jpg" alt="" />
            <div class="item">
              <p class="name">{{ item.roomName }}</p>
              <div class="status" v-if="item.status == 'use'">
                <p class="label tx1">对局中，预计结束</p>
                <p class="time" v-if="item && item.endTime1"><span>{{ item.endTime1.hours }}</span>点<span>{{ item.endTime1.minutes }}</span>分</p>
              </div>
              <div class="status" v-if="item.status == 'clear'">
                <p class="label tx2" >清台中，请稍后</p>
              </div>
              <div class="status"v-if="item.status == 'stop'">
                <p class="label tx3">整备中，敬请期待！</p>
              </div>
              <div class="status"v-if="item.status == 'due'">
                <p class="label tx4">预定中</p>
                <div class="yd_box yd_box1"  @click.stop="ydClick(item.timeSlotList)" v-if="item.recentlyYyMsg && item.recentlyYyMsg.endTime">
                  {{item.recentlyYyMsg.startObj.hours}}:{{item.recentlyYyMsg.startObj.minutes}} ~ {{item.recentlyYyMsg.endObj.hours}}:{{item.recentlyYyMsg.endObj.minutes}}
                  <p style="margin-left: 20rpx;">更多<van-icon name="arrow" /></p>
                </div>
              </div>
              <div @click="toRoom(item)" class="anniu-box" v-if="item.status != 'use' && item.status != 'stop'">
                <p>预定</p>
                <p>立即开台</p>
              </div>
            </div>
          </div>
          <!-- <div class="list on">
            <img src="/static/images/zhuotai-icon-on.jpg" alt="" />
            <div class="item">
              <p class="name">A03</p>
              <div class="status">
                <p class="label">对局中，预计等待</p>
                <p class="time"><span>01</span>时<span>20</span>分</p>
              </div>
            </div>
          </div> -->
          <!-- <div class="list">
            <img src="/static/images/zhuotai-icon.png" alt="" />
            <div class="item">
              <p class="name">A03</p>
              <div class="anniu-box">
                <p>预定</p>
                <p>立即开台</p>
              </div>
            </div>
          </div> -->
          <!-- <div class="list on">
            <img src="/static/images/zhuotai-icon-on.jpg" alt="" />
            <div class="item">
              <p class="name">A03</p>
              <div class="status">
                <p class="label">对局中，预计等待</p>
                <p class="time"><span>01</span>时<span>20</span>分</p>
              </div>
            </div>
          </div> -->
        </div>
      </div>

      <div class="romm-list-box" v-if="lanmuIndex === 1">
        <div class="title_box">
          <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230710/aZmapmXEZW3L8hClBJ9K.png" alt="">
        </div>
        <div class="child-lanmu" >
        <p @click="childClick(item)" :class="{'on':roomTypeId==item.id}" v-for="(item,index) in typeList" :key="index">{{ item.name }}</p>
      </div>
        <div @click="toRoom(item)" class="box" v-for="(item,index) in list" :key="index">
          <div class="box_b">
            <div class="img">
              <van-image
                width="220rpx"
                height="100%"
                fit="cover"
                lazy-load
                radius="20rpx"
                :src="item.roomImg && item.roomImg.length?item.roomImg[0]:''"
              />
              <p class="mc on" v-if="item.status == 'use'">消费中{{item.endTime}}结束</p> 
              <p class="mc on1" v-if="item.status == 'free'">空闲中</p> 
              <p class="mc on2" v-if="item.status == 'due'">已预定{{item.endTime}}结束</p> 
              <p class="mc on3" v-if="item.status == 'clear'">等待保洁打扫</p>
              <p class="mc on4" v-if="item.status == 'stop'">整备中</p>
            </div>
            <div class="right">
              <div class="msg">
                <div class="left">
                  <p class="name">{{item.roomName}} ({{item.roomTypeName}})</p> 
                  <div class="label_box">
                    <p v-for="(child,i) in item.labelList" :key="i">{{child.labelName}}</p>
                  </div>
                </div>
              </div>
              <div class="price_box">
                <div class="price">
                  <p class="old close">原价￥{{item.originalPrice}}/小时</p>
                  <p class="old">现价￥<span>{{item.price}}</span>/小时</p>
                  <p class="new" v-if="item.roomThaliPrice"><span class="tc">套餐</span>￥<span class="num">{{item.roomThaliPrice.price}}</span>/{{item.roomThaliPrice.hours}}小时</p>
                </div>
                <div>
                  <p class="num1">已售{{item.sales}}</p>
                  <p class="anniu" v-if="item.status != 'stop'">预定</p>
                  <p class="anniu on" v-else>预定</p>
                </div>
              </div>
            </div>
          </div>
          <div class="yd_box" @click.stop="ydClick(item.timeSlotList)" v-if="item.recentlyYyMsg && item.recentlyYyMsg.endTime">
            <p>
              <img src="/static/images/home_icon6.png" alt="">
            {{item.recentlyYyMsg.startObj.month}}月{{item.recentlyYyMsg.startObj.ri}}日({{item.recentlyYyMsg.startObj.week}}) {{item.recentlyYyMsg.startObj.hours}}:{{item.recentlyYyMsg.startObj.minutes}} ~ {{item.recentlyYyMsg.endObj.hours}}:{{item.recentlyYyMsg.endObj.minutes}}
            </p>
            <p>查看更多<van-icon name="arrow" /></p>
          </div>
        </div>
      </div>
      <div class="cungan-box" v-if="lanmuIndex === 2">
        <div class="title_box">
          <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230710/aZmapmXEZW3L8hClBJ9K.png" alt="">
        </div>
        <p>存杆柜</p>
      </div>
    </div>

    <div class="yy_pop_box">
      <van-popup :show="ydShow">
        <div class="box">
          <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230710/DjzK7082ACUEA237aP38.png" alt="">
          <div class="nr">
            <div class="nr_box">
              <div :class="item.status == 0?'list':'list on'" v-for="(item,index) in ydList" :key="index">
                <p class="line"></p>
                <div class="time_box">
                  <p class="quan"></p>
                  <div class="time">
                    <img v-if="item.status == 0" src="/static/images/kuang1.png" alt="">
                    <img v-else src="/static/images/kuang2.png" alt="">
                    <p class="text">{{item.startObj.month}}月{{item.startObj.ri}}日({{item.startObj.week}}) {{item.startObj.hours}}:{{item.startObj.minutes}}-{{item.endObj.hours}}:{{item.endObj.minutes}} <span>{{item.status == 0?'预定中':'消费中'}}</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <p class="anniu" @click="ydShow = false">我知道了</p>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { 
  getUserPhone,
  getLatitude,
  getLongitude,
} from "@/utils/auth";
import { 
  getFreeCount,
  getStoreDetails,
  getRoomByStoreId,
  getRoomTypeList
} from "@/api/index";
export default {
  data() {
    return {
      statusBarHeight: "", // 状态栏高度
      titleBarHeight: "", // 标题栏高度
      navBarHeight: "", // 导航栏总高度
      list: [],
      lanmuList:[
        {name:'中式台球',num:0,state:true},
        {name:'棋牌',num:0,state:false},
        // {name:'存杆柜',num:0,state:false},
      ],
      lanmuIndex:0,
      ydShow:false,
      ydList:[],
      isShow:false,
      typeList:[],
      roomTypeId:''
    };
  },
  methods: {
    childClick(item){
      this.roomTypeId = item.id
      this.getRoomList()
    },

    async getRoomTypeList1(){
      await getRoomTypeList().then(res=>{
        if(res.statusCode == '00000'){
          this.typeList = res.data
          this.roomTypeId = res.data[0].id
        }
      })
      this.getRoomList()
    },

    async getCount(){
      await getFreeCount().then(res=>{
        if(res.statusCode == '00000'){
          this.lanmuList[0].num = res.data.billiards
          this.lanmuList[1].num = res.data.mahjong
        }
      })
    },

    // 房间详情
    toRoom(item){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      if(item.status == 'stop'){
        this.$toast('整备中，敬请期待！')
        return
      }
      wx.navigateTo({
        url: `/pages/room_xq/main?roomId=${item.id}`,
      });
    },
    lanmuClick(index){
      this.lanmuIndex = index
      this.lanmuList.map((item,i)=>{
        item.state = false
        if(i == index){
          item.state = true
        }
      })
      if(this.lanmuIndex ==1){
        this.getRoomTypeList1()
      }else{
        this.getRoomList()
      }
    },
    async getRoomList(){
      this.$showLoading('加载中...')
      const roomIlk = !this.lanmuIndex ? 0 : 1
      this.list = []
      await getRoomByStoreId({roomIlk,roomTypeId:this.lanmuIndex==1?this.roomTypeId:''}).then(res=>{
        if(res.statusCode == '00000'){
          res.data.map(item=>{
            if (item.endTime) {
              const endArr = item.endTime.split(':')
              item.endTime1 = {
                hours: endArr[0],
                minutes: endArr[1]
              }
            }
            if(item.timeSlotList&&item.timeSlotList.length){
              item.timeSlotList.map(child=>{
                child.startObj = this.getYearMonthDay(child.startTime)
                child.endObj = this.getYearMonthDay(child.endTime)
              })
              item.recentlyYyMsg = item.timeSlotList.find(item => item.status == 0)
            }
          })
          //console.log(res.data)
          this.list = res.data
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        }else{
          wx.hideLoading()
        }
      })
      this.getCount()
    },

    // 获取年月日时分
    getYearMonthDay(time){
      const weekArr = ["周日","周一","周二","周三","周四","周五","周六"]
      let date = new Date(time);
      let obj = {}
      obj.year = date.getFullYear()
      obj.month = date.getMonth()+1 < 10 ? '0' + (date.getMonth()+1) : (date.getMonth()+1)
      obj.ri = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      obj.hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      obj.minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      obj.week = weekArr[date.getDay()]
      return obj
    },

    // 预定弹窗
    ydClick(item){
      //console.log(item)
      this.ydShow = true
      this.ydList = item
    },
    getElInfo() {
      var that = this;
      const query = wx.createSelectorQuery();
      query.select('#userinfodesc').boundingClientRect(data => {
        if(data.top < 0){
          that.isShow = true
          //console.log('显示')
        }else{
          that.isShow = false
          //console.log('隐藏')
        }
      }).exec();
    },
  },
  onPageScroll(e){
    this.getElInfo()
  },
  onShow(){
    this.getRoomTypeList1()
  },
  onLoad(options) {
  },
  beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        //console.log(`system:`, system);
        self.statusBarHeight = system.statusBarHeight;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      },
    });
  },
  onTabItemTap(){
    wx.vibrateShort({type:'heavy'});
  }
};
</script>

<style lang="scss" scoped>
.content {
}
.banner {
  width: 100%;
  height: 366rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  img {
    width: 750rpx;
    height: 366rpx;
    object-fit: cover;
  }
}
.title_box{
  text-align: center;
  margin:10rpx 0 40rpx 0;
  img{
    width: 248rpx;
    height: 74rpx;
  }
}
.lanmu-box {
  margin-top: 30rpx;
  height: 120rpx;
  &>div {
    display: flex;
    justify-content: space-around;
  }
  .lanmu {
    padding: 0 30rpx;
  }
  .on {
    position: fixed;
    top:0;
    z-index: 100;
    width: 100%;
    box-shadow: 0rpx 10rpx 20rpx 4rpx rgba(139,129,114,0.1);
    background: #fff;
    height: 120rpx;
  }
  .box {
    display: flex;
    .item {
      text-align: center;
      .label {
        color: #666;
	      font-size: 24rpx;
        span {
          margin-left: 6rpx;
          color: #00cc6a;
        }
      }
      .name {
        align-items: center;
        color: #333;
        display: flex;
        flex-direction: column;
        font-family: PingFang SC;
        font-size: 36rpx;
        font-weight: 600;
        justify-content: flex-start;
      }
      img {
        width: 34rpx;
        height: 13rpx;
        transform: translateY(-15rpx)
      }
    }
  }
  .mid {
    border-right: 2rpx solid #d1d1d1;
    height: 20rpx;
    margin-top: 36rpx;
    &:last-child {
      display: none;
    }
  }
}
.child-lanmu {
  margin: 0 30rpx;
  display: flex;
  margin-bottom: 30rpx;
  p {
    margin: 0 30rpx;
    margin-bottom: 10rpx;
    padding-bottom: 5rpx;
    border-bottom:2px solid transparent;
    &.on {
      border-bottom-color: #00C200;
    }
  }
}
.taizhu-box {
  padding: 0 30rpx;
  .list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .list {
    width: 330rpx;
    height: 218rpx;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 34rpx;
    position: relative;
    img {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .item {
      position: relative;
      z-index: 2;
      .name {
        font-size: 38rpx;
        font-weight: bold;
        color: #fff;
      }
      .status {
        margin-top: 10rpx;
        .label {
          color: #666;
	        font-size: 24rpx;
        }
        .tx1{
          color:rgba(240, 73, 37, 0.9) ;
        }
        .tx2{
          color:rgba(58, 119, 229, 0.9);
        }
        .tx3{
          color:rgba(154, 165, 187, 0.9);
        }
        .tx4{
          color:rgba(255, 133, 21, 0.9);
        }
        .time {
          font-size: 24rpx;
          color: rgba(240,73,37,0.9);
          margin-top: 10rpx;
          span {
            display: inline-block;
            width: 40rpx;
            height: 40rpx;
            line-height: 40rpx;
            border-radius: 6rpx;
            color: #fff;
            padding: 0 6rpx;
            background-color: rgba(240,73,37,0.9);
            text-align: center;
            margin: 0 5rpx;
            font-weight: 600;
          }
        }
      }
      .anniu-box {
        display: flex;
        justify-content: center;
        margin: 10rpx auto 0 auto;
        p {
          width: 120rpx;
          height: 50rpx;
          line-height: 50rpx;
          color: #fff;
          font-size: 24rpx;
          background: #04b660;
          &:first-child {
            width: 100rpx;
            background: #00cc6a;
            border-top-left-radius: 30rpx;
            border-bottom-left-radius: 30rpx;
          }
          &:last-child {
            border-top-right-radius: 30rpx;
            border-bottom-right-radius: 30rpx;
          }
        }
      }
    }
    &.on {
      .item {
        .name {
          color: #04b660;
        }
      }
    }
  }
}

.romm-list-box{
    padding: 0 30rpx;
    .box{
      margin:0 0 24rpx 0;
      background: #fff;
      padding:16rpx 28rpx 24rpx 16rpx;
      border-radius: 20rpx;
      box-shadow: 0rpx 32rpx 40rpx 0rpx rgba(34,35,53,0.04);
      .box_b{
        display: flex;
        .img{
          height: 310rpx;
          position: relative;
          .mc{
            position: absolute;
            bottom:0;
            left: 0;
            width: 100%;
            height: 48rpx;
            line-height: 48rpx;
            border-bottom-left-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
            &.on{
              background: rgba(240, 73, 37, 0.9);
            }
            &.on1{
              background: rgba(0, 194, 0, 0.9);
            }
            &.on2{
              background: rgba(255, 133, 21, 0.9);
            }
            &.on3{
              background: rgba(58, 119, 229, 0.9);
            }
            &.on4{  
              background: rgba(154, 165, 187, 0.9);
            }
          }
        }
        .right{
          flex: 1;
          margin-left:16rpx;
        }
      }
      .msg{
        display: flex;
        justify-content: space-between;
        margin-bottom:0rpx;
        .left{
          .name{
            font-size: 32rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #111111;
          }
          .label_box{
            margin-top:12rpx;
            p{
              display: inline-block;
              padding:0 12rpx;
              height: 40rpx;
              line-height: 40rpx;
              background: #FFFFFF;
              border: 2rpx solid #00C200;
              border-radius: 10rpx;
              margin-right:16rpx;
              font-size: 22rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #00C200;
              margin-bottom:10rpx;
              &:last-child{
                margin-right:0;
              }
            }
          }
        }
      }
      .price_box{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-top:10rpx;
        .price{
          font-size: 22rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #111111;
          .close{
            text-decoration:line-through;
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #999999;
          }
          .old{
            span{
              font-size:34rpx;
              font-weight: bold;
            }
          }
          .new{
            display: flex;
            align-items: baseline;
            color: #00C200;
            margin-top:8rpx;
            font-size: 24rpx;
            .tc{
              display: inline-block;
              width: 56rpx;
              height: 34rpx;
              line-height: 34rpx;
              background: rgba(0, 194, 0, 0.1);
              border-radius: 6rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              font-size: 20rpx;
              color: #00C200;
              text-align: center;
              margin-right:8rpx;
              position: relative;
              top:-2rpx;
            }
            .num{
              font-size:34rpx;
              font-weight: bold;
            }
          }
        }
        .num1{
          color:#999999;
          font-size:22rpx;
          text-align: center;
          position: relative;
          bottom:20rpx;
        }
        .anniu{
          width: 128rpx;
          height: 56rpx;
          line-height: 56rpx;
          background: #00C200;
          border-radius: 38rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          text-align: center;
          position: relative;
          top:-6rpx;
          &.on{
            background:#9AA5BB;
          }
        }
      }
      .to_nr{
        transform: skewX(-30deg);
        position: relative;
        .sjx{
          position: absolute;
          right:-14rpx;
          bottom:0rpx;
          transform: skewX(30deg);
          width: 0;
          height: 0;
          border-left: 8rpx solid transparent;  
          border-right: 8rpx solid transparent;  
          border-bottom: 10rpx solid #CF6D26; 
        }
        .sjx_on{
          border-bottom-color:#555;
        }
      }
      .bottom_nr{
        position: relative;
        div {
          transform: skewX(30deg);
        }
        .sjx{
          position: absolute;
          right:-14rpx;
          bottom:0rpx;
          transform: skew(0deg);
          width: 0;
          height: 0;
          border-top: 10rpx solid #CF6D26;
          border-right: 8rpx solid transparent;
          border-left: 8rpx solid transparent;
        }
        .sjx_on{
          border-top-color:#555;
        }
      }
    }
  }
.cungan-box {
  padding: 0 30rpx;
  margin: 0 0 50rpx 0;
  p {
    width: 100%;
    height: 200rpx;
    background: #eee;
    border-radius: 20rpx;
  }
}
.yd_box{
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #FF8515;
  margin-top:30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &.yd_box1{
      margin-top:0;
      justify-content: center;
  }
  p{
    display: flex;
    align-items: center;
  }
  img{
    width: 28rpx;
    height: 28rpx;
    margin-right:12rpx;
  }
}
.yy_pop_box{
  /deep/ .van-popup {
    background: none;
    width: 580rpx;
  }
  .box{
    width: 100%;
    height: 710rpx;
    font-size:28rpx;
    .bj{
      width: 100%;
      height: 100%;
      position: absolute;
      top:0;
      z-index: 1;
    }
    .nr{
      position: relative;
      z-index: 10;
      margin:0 20rpx 0 20rpx;
      padding-top:250rpx;
      .nr_box{
        height: 260rpx;
        overflow-y: scroll;
      }
      .list{
        display: flex;
        justify-content: space-between;
        padding-left:20rpx;
        position: relative;
        height: 90rpx;
        .line{
          width: 2rpx;
          height: 90rpx;
          background: #E8E8E8;
          position: absolute;
          left: 10rpx;
        }
        .time_box{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          left: -20rpx;
          .quan{
            width: 18rpx;
            height: 18rpx;
            background: #FFFFFF;
            border: 2rpx solid #FF8515;
            border-radius: 50%;
            margin-right:18rpx;
          }
          .time{
            position: relative;
            width: 100%;
            height: 58rpx;
            line-height: 58rpx;
            background: #FFFFFF;
            font-size: 26rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FF8515;
            img {
              width: 100%;
              height: 100%;
              position: absolute;
              top:0;
            }
            .text{
              
              display: flex;
              justify-content: space-between;
              position: relative;
              z-index: 10;
              margin:0 28rpx;
            }
          }
        }
        &.on{
          .quan{
            border-color:#F04925
          }
          .text{
            color:#F04925;
          }
        }
      }
    }
    .anniu{
      width: 434rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: #00C200;
      border-radius: 40rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      position: relative;
      z-index: 10;
      margin:58rpx auto 0 auto;
      text-align: center;
    }
  }
}
</style>